<template>
	<div>
		<el-container class="home-container">
			<el-header>
				<el-row>
					<el-col :offset="0" :span="2" style="margin: 20px 0 0 0;">
						<p class="system-name">卧龙投流系统</p>
					</el-col>
					<el-col :offset="1" :span="17">
						<el-menu router :default-active="activeIndex" mode="horizontal" @select="handleSelect"
							text-color="#fff" active-text-color="#ffd04b" background-color="#2661EF">
							<el-menu-item index="instrument">仪表盘</el-menu-item>
							<el-submenu index="1">
								<template slot="title">账号管理</template>
								<el-menu-item index="organization">纵横组织</el-menu-item>
								<el-menu-item index="advertisingUser">广告账户</el-menu-item>
								<el-menu-item index="qualiFications">资质列表</el-menu-item>
								<el-menu-item index="system">系统账号</el-menu-item>
								<el-menu-item index="Forbidden">封禁账号</el-menu-item>
							</el-submenu>
							<el-menu-item index="order">订单管理</el-menu-item>
							<el-menu-item index="project">项目管理</el-menu-item>
							<el-menu-item index="advertising">广告管理</el-menu-item>
							<el-submenu index="2">
								<template slot="title">权限管理</template>
								<el-menu-item index="jurisdiction">投手列表</el-menu-item>
								<el-menu-item index="jurisdictions">投手列表</el-menu-item>
							</el-submenu>
							<el-submenu index="3">
								<template slot="title">素材管理</template>
								<el-menu-item index="Material">素材列表</el-menu-item>
								<el-menu-item index="title">标题管理</el-menu-item>
								<el-menu-item index="addQuality">添加优质素材</el-menu-item>
							</el-submenu>
							<el-submenu index="4">
								<template slot="title">商品管理</template>
								<el-menu-item index="addQuality">商品列表</el-menu-item>
							</el-submenu>
							<el-menu-item index="Configuration">用户配置</el-menu-item>
						</el-menu>
					</el-col>
					<el-col :span="4" style="min-width: 150px">
						<el-dropdown style="float: right; margin: 20px 10px">
							<span class="el-dropdown-link" style="color: #fff; cursor: pointer">
								知否君 &nbsp;&nbsp;<i class="fa fa-caret-down fa-1x"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item @click.native="editPasswordDialog = true">修改密码</el-dropdown-item>
								<el-dropdown-item @click.native="logout()">退出系统</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<el-avatar shape="square" :src="avatar" style="margin: 10px; float: right"></el-avatar>
					</el-col>
				</el-row>
				<!-- 修改密码 dialog -->
				<el-dialog title="修改密码" :visible.sync="editPasswordDialog" width="30%" :before-close="closeEditPassword"
					:close-on-click-modal="false">
					<el-form ref="editPasswordForm" :rules="editPasswordRule" class="demo-form-inline"
						:model="editPasswordForm" label-width="90px">
						<el-form-item label="原密码:" prop="oldPassword">
							<el-input v-model="editPasswordForm.oldPassword" placeholder="请输入原密码" />
						</el-form-item>
						<el-form-item label="新密码:" prop="newPassword">
							<el-input v-model="editPasswordForm.newPassword" placeholder="请输入新密码" />
						</el-form-item>
						<el-form-item label="确认密码:" prop="confirmPassword">
							<el-input v-model="editPasswordForm.confirmPassword" placeholder="请确认密码" />
						</el-form-item>
						<el-form-item>
							<el-button size="small" @click="closeEditPassword()">取 消</el-button>
							<el-button size="small" type="primary" @click="editPassword()">保 存</el-button>
						</el-form-item>
					</el-form>
				</el-dialog>
			</el-header>

			<el-container style="overflow: auto">
				<!-- 菜单 -->
				<el-container>
					<el-main>

						<!-- 面包屑 -->
						<Breadcrumb />
						<!-- 主要内容 -->
						<router-view></router-view>
					</el-main>
				</el-container>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Breadcrumb from "../../components/Breadcrumb.vue";
	export default {
		name: 'HomeView',
		components: {
			Breadcrumb
		},
		data() {

			return {
				activeIndex: '1',
				activeIndex2: '1',
				state: null,
				authCode: null,
				menulist: JSON.parse(localStorage.getItem("menulist")),
				avatar: require("@/assets/img/avator.jpg"),
				isCollapse: false,
				// 被激活的链接地址,默认是首页
				activePath: "",
				editPasswordDialog: false,
				editPasswordForm: {
					oldPassword: "",
					newPassword: "",
					confirmPassword: "",
				},
				editPasswordRule: {
					oldPassword: [{
						required: true,
						message: "请输入原密码",
						trigger: "blur"
					}, ],
					newPassword: [{
						required: true,
						message: "请输入新密码",
						trigger: "blur"
					}, ],
					confirmPassword: [{
						required: true,
						message: "请确认新密码",
						trigger: "blur"
					}, ],
				},
				in: 1
			};
		},
		mounted() {

			// 获取查询参数
			this.state = this.$route.query.state;
			this.authCode = this.$route.query.auth_code;
			if (this.authCode != null) {
				this.$axios.get('/token/' + this.authCode).then((res) => {
					console.log(res)
				})
			}
			// 打印到控制台以验证  
			console.log('State:', this.state);
			console.log('Auth Code:', this.authCode);





		},
		created() {
			const userId = this.$route.params.id;
			console.log(userId); // 输出路由参数 id 的值  
			this.activePath = sessionStorage.getItem("activePath") ?
				sessionStorage.getItem("activePath") :
				"/index";
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			// 保存链接的激活状态
			saveActiveNav(activePath) {
				sessionStorage.setItem("activePath", activePath);
				this.activePath = activePath;

			},
			// 修改密码
			editPassword() {
				this.$refs.editPasswordForm.validate(async (valid) => {
					if (!valid) return;
					if (this.editPasswordForm.newPassword != this.editPasswordForm.confirmPassword) {
						return this.$message.error("两次密码不正确，请重新输入！");
					}
					// 请求接口
					const {
						data: res
					} = await this.$axios.post(
						"/user/updatePasswordword",
						this.editPasswordForm
					);
					if (res.success) {
						this.$message.success("密码修改成功，请重新登录！");
						sessionStorage.clear();
						this.$router.push("/login");
					} else {
						return this.$message.error(res.msg);
					}
				});
			},
			// 取消关闭密码
			closeEditPassword() {
				this.editPasswordDialog = false;
				// 坑：resetFields 方法只能重置带有 props 属性的元素
				this.$refs.editPasswordForm.resetFields();
			},
			// 退出系统
			logout() {
				this.$confirm("确定要退出系统吗?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(() => {
						// 清除缓存
						sessionStorage.clear();
						this.$router.push("/login");
					})
					.catch(() => {
						return false;
					});
			},
		},
	};
</script>

<style scoped>
	.el-menu--horizontal>.el-submenu .el-submenu__title {
		height: 60px;
		line-height: 60px;
		border-bottom: 2px solid transparent;
		color: #fff;
	}

	.home-container {
		position: absolute;
		height: 100%;
		top: 0px;
		left: 0px;
		width: 100%;
		background: #f2f3f5;
	}

	.el-header {
		background: #2661ef;
		padding: 0 10px;
		overflow: hidden;
	}

	.system-name {
		color: #fff;
		font-size: 18px;
	}

	.el-aside {
		background: white;
		width: auto !important;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}

	.el-footer {
		color: #cccccc;
		text-align: center;
		line-height: 60px;
	}

	.el-footer:hover {
		color: #2661ef;
	}

	.toggle-button {
		background-color: #d9e0e7;
		font-size: 18px;
		line-height: 24px;
		color: #fff;
		text-align: center;
		letter-spacing: 0.2em;
		cursor: pointer;
		color: black;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}

	.el-menu-item.is-active {
		color: #000 !important;
		font-size: 15px;
		font-weight: bold;
		background-color: #fff !important;
		border-radius: 2px;
		height: 50px;
		line-height: 50px;
		box-sizing: border-box;
		margin: 2px 5px 0px 2px;
	}

	.el-menu--horizontal>.el-menu-item {
		float: left;
		height: 60px;
		line-height: 60px;
		margin: 0;
		border-bottom: 2px solid transparent;
		color: #fff;
	}
</style>